<template>
  <button @click="flag = !flag">切换</button>
  <transition name="my">
    <div class="box" v-if="flag"></div>
  </transition>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let flag = ref(false)
</script>

<style scoped lang="less">
.box {
  width: 300px;
  height: 300px;
  background-color: red;
}

// 默认类名 v- 开头
// 如果同时有多个transition 需要指定name
// 类名以 name- 开头

// 进入前
.my-enter-from {
  width: 0;
  height: 0;
}
// 进入中
.my-enter-active {
  transition: all 1s;
}
// 进入后
.my-enter-to {
  width: 300px;
  height: 300px;
  background: skyblue;
}

// 离开前
.my-leave-from {
  width: 300px;
  height: 300px;
}
// 离开时
.my-leave-active {
  transition: all 1s;
}
// 离开后
.my-leave-to {
  width: 0;
  height: 0;
}
</style>
